<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="renderer" content="webkit">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
	<link rel="stylesheet" href="https://cache.amap.com/lbs/static/main1119.css"/>
    <link rel="stylesheet" href="css/bigData.css">
    <title>智慧环卫可视化数据分析</title>
	<style>
		#container{
            width: 54.8vw;
            top: 23vh;
            left: 22.6vw;
            opacity: 0.8;
		}
        .amap-info-content{
            width: 20vw;
            border-radius: 5px;
            padding: 0px;
            /*height: 50vh;*/
        }
        .amap-info-close {
            z-index: 10001;
            right: 10px!important;
        }
	</style>
</head>

<body class="flex-column">
	<div class="titleImg">
		<div class="titleImg_one flex-row flex-center">
			<img src="image/标题@2x.png"/>
			<span style="padding-bottom: 1.5vh;">
				智慧环卫可视化数据分析
			</span>
		</div>
		<div class="titleImg_date flex-row flex-center">
			<img  src="image/217时间.png"/>
			<span id="showtime"> </span>
		</div>
		<div class="titleImg_btn cursor flex-row flex-center" onclick="doTiaozhuan()" style="color:#0F0; font-size:16px;">进入系统</div>
	</div>
	<div class="main_content">
		<div class="float_left">
			<div class="floatItem" style="height: 45.3vh;">
				<img class="floatItem_borderImg floatItem_borderImg_leftTop" src="image/左上角@2x.png"/>
				<img class="floatItem_borderImg floatItem_borderImg_rightTop" src="image/右上角@2x.png"/>
				<img class="floatItem_borderImg floatItem_borderImg_rightBottom" src="image/右下角@2x.png"/>
				<img class="floatItem_borderImg floatItem_borderImg_leftBottom" src="image/左下角@2x.png"/>
				<div class="floatItem_title">
					<div>项目基本情况<img src="image/装饰@2x.png"/> </div>
					<img src="image/矩形%2013%20拷贝%203@2x.png"/>
				</div>
				<div class="xmjbqk_top flex-row flex-center justify-around">
					<div class="xmjbqk_top_item flex-column flex-center">
						<div class="flex-column flex-center xmjbqk_top_item_one">
							<div id="carCount"> </div>辆
						</div>
						<div class="xmjbqk_top_item_two flex-center flex-row">车辆</div>
					</div>
					<div class="xmjbqk_top_item flex-column flex-center">
						<div class="flex-column flex-center xmjbqk_top_item_one">
							<div id="workerTotal"> </div>人
						</div>
						<div class="xmjbqk_top_item_two flex-center flex-row">人数</div>
					</div>
				</div>
				<div class="xmjbqk_bottom">
					<div class="xmjbqk_bottom_item flex-row align-center">
						<div class="align-center flex-row">车辆行驶里程</div>
						<div id="travelSumMileage"></div>
						<div>公里</div>
					</div>
					<div class="xmjbqk_bottom_item flex-row align-center">
						<div class="align-center flex-row">车辆作业里程</div>
						<div id="workSumMileage"> </div>
						<div>公里</div>
					</div>
					<div class="xmjbqk_bottom_item flex-row align-center">
						<div class="align-center flex-row">车辆清运里程</div>
						<div id="qinyunSumMileage"> </div>
						<div>公里</div>
					</div>
					<div class="xmjbqk_bottom_item flex-row align-center">
						<div class="align-center flex-row">车辆累计油耗</div>
						<div id="youhao"> </div>
						<div>升</div>
					</div>
					<div class="xmjbqk_bottom_item flex-row align-center">
						<div class="align-center flex-row">人员作业里程</div>
						<div id="xunchaSumMileage"> </div>
						<div>公里</div>
					</div>
					<div class="xmjbqk_bottom_item flex-row align-center">
						<div class="align-center flex-row">人员作业时长</div>
						<div id="xunchaTime"> </div>
						<div>小时</div>
					</div>
				</div>
			</div>
			<!-- style="height: 39.3vh;" -->
			<div class="floatItem" style="height: 39.4vh;">
				<img class="floatItem_borderImg floatItem_borderImg_leftTop" src="image/左上角@2x.png"/>
				<img class="floatItem_borderImg floatItem_borderImg_rightTop" src="image/右上角@2x.png"/>
				<img class="floatItem_borderImg floatItem_borderImg_rightBottom" src="image/右下角@2x.png"/>
				<img class="floatItem_borderImg floatItem_borderImg_leftBottom" src="image/左下角@2x.png"/>
				<div class="floatItem_title">
					<div>人员到岗<img src="image/装饰@2x.png"/> </div>
					<img src="image/矩形%2013%20拷贝%204@2x.png"/>
				</div>
				<div class="flex-column">
					<div class="flex-row flex-center">
						<div class="circleChart" id="circle1"></div>	
						<div style="flex: 1;">
							<div class="flex-row flex-center justify-between" style="margin-bottom: 1.8vh;">
								<div class="detailsNumItem flex-row flex-center" style="margin-right: 0.625rem;">
									<img src="image/矩形%20871@2x.png"/>
									人员总数：<div id="workTotal"> </div>人
								</div>
								<div class="detailsNumItem flex-row flex-center">
									<img src="image/矩形%20871@2x.png"/>
									到岗：<div id="toGangDay"></div>人
								</div>
							</div>
							<div class="detailsNumItem flex-row">
								<img src="image/矩形%20871@2x.png"/>
								未到岗：<div id="weiDaoGang"></div>人
							</div>
						</div>
					</div>
					<div id="rydgChar" class="rydgChar" onmouseover="sbxf('1')" onmouseleave="sbyc('1')"></div>
				</div>
				<div class="bingDetails flex-column justify-between" id="bingDetails1">

				</div>
			</div>
		</div>
		<div class="middle_content">
			<div style="width: 100%;margin-bottom: 2.7vh;" class="flex-row align-center justify-between">
				<div class="middle_top_item flex-center flex-row">
					<img class="floatItem_borderImg floatItem_borderImg_leftTop" src="image/左上角@2x.png"/>
					<img class="floatItem_borderImg floatItem_borderImg_rightTop" src="image/右上角@2x.png"/>
					<img class="floatItem_borderImg floatItem_borderImg_rightBottom" src="image/右下角@2x.png"/>
					<img class="floatItem_borderImg floatItem_borderImg_leftBottom" src="image/左下角@2x.png"/>
					<img class="middle_top_item_img" src="image/车辆里程管理@2x.png"/>
					<div>
						<div class="flex-row align-center">
							<div style="font-size: 2.7vh;color: #19CBD9;margin-right: 0.2vw;" id="ctravelSumMileage"> </div>
							<div style="font-size: 1vh;">公里</div>
						</div>
						<div style="font-size: 1.4vh;margin-top: 1.4vh;">车辆里程</div>
					</div>
				</div>
				<div class="middle_top_item flex-center flex-row">
					<img class="floatItem_borderImg floatItem_borderImg_leftTop" src="image/左上角@2x.png"/>
					<img class="floatItem_borderImg floatItem_borderImg_rightTop" src="image/右上角@2x.png"/>
					<img class="floatItem_borderImg floatItem_borderImg_rightBottom" src="image/右下角@2x.png"/>
					<img class="floatItem_borderImg floatItem_borderImg_leftBottom" src="image/左下角@2x.png"/>
					<img class="middle_top_item_img" src="image/6-1员工@2x.png"/>
					<div>
						<div class="flex-row align-center">
							<div style="font-size: 2.7vh;color: #19CBD9;margin-right: 0.2vw;" id="cxunchaSumMileage"></div>
							<div style="font-size: 1vh;">公里</div>
						</div>
						<div style="font-size: 1.4vh;margin-top: 1.4vh;">人员里程</div>
					</div>
				</div>
				<div class="middle_top_item flex-center flex-row">
					<img class="floatItem_borderImg floatItem_borderImg_leftTop" src="image/左上角@2x.png"/>
					<img class="floatItem_borderImg floatItem_borderImg_rightTop" src="image/右上角@2x.png"/>
					<img class="floatItem_borderImg floatItem_borderImg_rightBottom" src="image/右下角@2x.png"/>
					<img class="floatItem_borderImg floatItem_borderImg_leftBottom" src="image/左下角@2x.png"/>
					<img class="middle_top_item_img" style="height: 4.7vh;" src="image/油耗@2x.png"/>
					<div>
						<div class="flex-row align-center">
							<div style="font-size: 2.7vh;color: #19CBD9;margin-right: 0.2vw;" id="cyouhao"> </div>
							<div style="font-size: 1vh;">升</div>
						</div>
						<div style="font-size: 1.4vh;margin-top: 1.4vh;">今日油耗</div>
					</div>
				</div>
			</div>
			<div class="middle_Bottom flex-row justify-between align-center">
				<div>
					<div class="middle_bottom_left_item flex-center flex-row" id="middle_bottom_left_item1" onclick="middlecenterChange('1')">人员</div>	
					<div class="middle_bottom_left_item flex-center flex-row" id="middle_bottom_left_item2" onclick="middlecenterChange('2')">车辆</div>	
					<div class="middle_bottom_left_item flex-center flex-row" id="middle_bottom_left_item3" onclick="middlecenterChange('3')">设施</div>	
				</div>
				<div class="middle_right">
					<div class="middle_right_title flex-row align-center">
						<img src="image/矩形%20871@2x.png"/>图层控制
					</div>
					<div id="personMistake" :hidden>
                        <div class="flex-row justify-between align-center middle_right_item">
                            人员位置
                            <input type="checkbox" name="vehicle" value="Bike" onclick="drawPerson(this)"/>
                        </div>
						<div class="flex-row justify-between align-center middle_right_item">
							迟到
							<input type="checkbox" name="vehicle" value="Bike" onclick="workMistake('迟到点',this,1)"/>
						</div>
						<div class="flex-row justify-between align-center middle_right_item">
							早退
							<input type="checkbox" name="vehicle" value="Bike" onclick="workMistake('早退点',this,2)"/>
						</div>
						<div class="flex-row justify-between align-center middle_right_item">
							越界
							<input type="checkbox" name="vehicle" value="Bike" onclick="workMistake('越界点',this,3)"/>
						</div>
						<div class="flex-row justify-between align-center middle_right_item">
							滞留
							<input type="checkbox" name="vehicle" value="Bike" onclick="workMistake('滞留点',this,4)"/>
						</div>
					</div>
                    <div id="carMistake" :hidden>
                        <div class="flex-row justify-between align-center middle_right_item">
                            车辆位置
                            <input type="checkbox" name="vehicle" value="Bike" onclick="drawCar(this)"/>
                        </div>
                        <div class="flex-row justify-between align-center middle_right_item">
                            超时停车
                            <input type="checkbox" name="vehicle" value="Bike" onclick="carMistake('停车点',this,1)"/>
                        </div>
                        <div class="flex-row justify-between align-center middle_right_item">
                            越界
                            <input type="checkbox" name="vehicle" value="Bike" onclick="carMistake('越界',this,2)"/>
                        </div>
                        <div class="flex-row justify-between align-center middle_right_item">
                            超速
                            <input type="checkbox" name="vehicle" value="Bike" onclick="carMistake('超速点',this,3)"/>
                        </div>
                        <div class="flex-row justify-between align-center middle_right_item">
                            油量异常
                            <input type="checkbox" name="vehicle" value="Bike" onclick="carMistake('油量异常',this,4)"/>
                        </div>
                    </div>
                    <div id="workTarget" :hidden>
                        <div class="flex-row justify-between align-center middle_right_item">
                            停车场
                            <input type="checkbox" name="vehicle" value="Bike" onclick="drawFacility(13,'停车场',this)"/>
                        </div>
                        <div class="flex-row justify-between align-center middle_right_item">
                            中转站
                            <input type="checkbox" name="vehicle" value="Bike" onclick="drawFacility(10,'中转站',this)"/>
                        </div>
                        <div class="flex-row justify-between align-center middle_right_item">
                            垃圾点
                            <input type="checkbox" name="vehicle" value="Bike" onclick="drawFacility(18,'垃圾点',this)"/>
                        </div>
                        <div class="flex-row justify-between align-center middle_right_item">
                            垃圾场
                            <input type="checkbox" name="vehicle" value="Bike" onclick="drawFacility(11,'垃圾场',this)"/>
                        </div>
                        <div class="flex-row justify-between align-center middle_right_item">
                            压缩点
                            <input type="checkbox" name="vehicle" value="Bike" onclick="drawFacility(6,'垃圾压缩点',this)"/>
                        </div>
                        <div class="flex-row justify-between align-center middle_right_item">
                            作业道路
                            <input type="checkbox" name="vehicle" value="Bike" onclick="drawRoad('作业道路',this)"/>
                        </div>
                    </div>
				</div>
<!--				<div class="middle_center">-->
<!--					<div style="font-size: 1.6vh;text-align: center;">人员信息</div>-->
<!--					<img src="image/图层%201075@2x.png"/>-->
<!--					<div class="flex-row align-center" style="font-size: 1.4vh;">-->
<!--						<div>姓名：</div>-->
<!--						<div style="color: #00CBF7;">张继华</div>-->
<!--					</div>-->
<!--					<div class="flex-row align-center" style="margin-top: 1vh;font-size: 1.4vh;">-->
<!--						<div>人员类型：</div>-->
<!--						<div style="color: #00CBF7;">类型一</div>-->
<!--					</div>-->
<!--					<div class="flex-row align-center" style="margin-top: 1vh;font-size: 1.4vh;">-->
<!--						<div>所属部门：</div>-->
<!--						<div style="color: #00CBF7;">综合部</div>-->
<!--					</div>-->
<!--					<div class="flex-row align-center" style="margin-top: 1vh;font-size: 1.4vh;">-->
<!--						<div>联系电话：</div>-->
<!--						<div style="color: #00CBF7;">17837463628</div>-->
<!--					</div>-->
<!--				</div>-->
			</div>
			<div id="container"></div>
		</div>
		<div class="float_right">
			<div class="floatItem" style="height: 36.4vh;">
				<img class="floatItem_borderImg floatItem_borderImg_leftTop" src="image/左上角@2x.png"/>
				<img class="floatItem_borderImg floatItem_borderImg_rightTop" src="image/右上角@2x.png"/>
				<img class="floatItem_borderImg floatItem_borderImg_rightBottom" src="image/右下角@2x.png"/>
				<img class="floatItem_borderImg floatItem_borderImg_leftBottom" src="image/左下角@2x.png"/>
				<div class="floatItem_title">
					<div>车辆出车<img src="image/装饰@2x.png"/> </div>
					<img src="image/矩形%2013%20拷贝%204@2x.png"/>
				</div>
				<div class="flex-column">
					<div class="flex-row flex-center">
						<div class="circleChart" id="circle2"></div>	
						<div style="flex: 1;">
							<div class="flex-row flex-center justify-between" style="margin-bottom: 1.8vh;">
								<div class="detailsNumItem flex-row flex-center" style="margin-right: 0.625rem;">
									<img src="image/矩形%20871@2x.png"/>
									车辆总数：<span id ="yscarTotal"></span> 辆
								</div>
								<div class="detailsNumItem flex-row flex-center">
									<img src="image/矩形%20871@2x.png"/>
									出车：<span id ="yscarWorkNum"></span>   辆
								</div>
							</div>
							<div class="detailsNumItem flex-row">
								<img src="image/矩形%20871@2x.png"/>
								未出车：<span id ="ysnotWork"></span> 辆
							</div>
						</div>
					</div>
					<div id="clccChar" class="clccChar" onmouseover="sbxf('2')" onmouseleave="sbyc('2')"></div>
				</div>

			</div>
			<div class="floatItem" style="height: 48.5vh;">
				<img class="floatItem_borderImg floatItem_borderImg_leftTop" src="image/左上角@2x.png"/>
				<img class="floatItem_borderImg floatItem_borderImg_rightTop" src="image/右上角@2x.png"/>
				<img class="floatItem_borderImg floatItem_borderImg_rightBottom" src="image/右下角@2x.png"/>
				<img class="floatItem_borderImg floatItem_borderImg_leftBottom" src="image/左下角@2x.png"/>
				<div class="floatItem_title">
					<div>违规统计<img src="image/装饰@2x.png"/> </div>
					<img src="image/矩形%2013%20拷贝%204@2x.png"/>
				</div>
				<div class="wgtjTop flex-row align-center justify-between">
					<div class="flex-row align-center" onclick="wgtjTopChange('1')" id="wgtjTopChangeItem1">
						<img src="image/6-1员工@2x%20(1).png" style="margin-right: 0.4vw;"/>
						<div>
							<div style="font-size: 1.8vh;" id="yxrywgcount"> </div>
							<div style="font-size: 1.2vh;">人员违规</div>
						</div>
					</div>
					<div class="flex-row align-center" onclick="wgtjTopChange('2')" id="wgtjTopChangeItem2">
						<div class="flex-column align-end">
							<div style="font-size: 1.8vh;" id="yxvehwgcount"> </div>
							<div style="font-size: 1.2vh;">车辆违规</div>
						</div>
						<img src="image/车辆违规管理-01@2x.png" style="margin-left: 0.4vw;"/>
					</div>
				</div>
				<div class="floatItem_title" style="margin-top: 1.8vh;margin-bottom: 0.8vh;">
					<div id="wgtjCharsTitle">人员违规统计表<img src="image/装饰@2x.png"/> </div>
					<img src="image/矩形%2013%20拷贝%204@2x.png"/>
				</div>
				<div style="font-size: 1vh;" id="danwei">人(单位)</div>
				<div class="wgtjChars" id="wgtjChars"></div>
				<div class="wgtjChars" id="wgtjChars2"></div>
			</div>
		</div>
	</div>
</body>
<script src="https://webapi.amap.com/maps?v=1.4.15&key=593675a63b9f1f240d4a82210582a31c"></script>
<script type="text/javascript"
        src="https://webapi.amap.com/maps?v=1.4.15&key=593675a63b9f1f240d4a82210582a31c&plugin=AMap.MarkerClusterer"></script>
<script type="text/javascript" src="js/echarts.min.js"></script>
<script type="text/javascript" src="js/jquery-1.11.js"></script>
<script src="js/jquery.cookie.js"></script>
<script src="js/circleCharts.min.js"></script>
<script src="js/circleChart.js"></script>
<script type="text/javascript" src="js/bigData.js"></script>
<script type="text/javascript">

    window.onload = function() {
        var showtime = document.getElementById("showtime");
        setInterval(function() {
            var time = new Date();  // 程序计时的月从0开始取值后+1
            var m = time.getMonth() + 1;
            var t = time.getFullYear() + "-" + m + "-"
                + time.getDate() + " " + time.getHours() + ":"
                + time.getMinutes() + ":" + time.getSeconds();
            showtime.innerHTML = t;
        }, 1000);
    };
	$(function() {
		var r = document.body.offsetWidth / window.screen.availWidth;
		$(document.body).css("-webkit-transform","scale(" + r + ")");
		});
		$(window).resize(function() {
		var r = document.body.offsetWidth / window.screen.availWidth;
		$(document.body).css("-webkit-transform","scale(" + r + ")");
	});
    function doTiaozhuan(){
        let enterBtn = this.parent.document.getElementById('enter_sys_btns');
        enterBtn.click();
        console.log(this.parent);
        console.log(enterBtn)
    }
</script>

</html>